<template>
  <view class="order-detail-page page">
    <!-- 顶部导航栏-开始 -->
    <view class="cu-bar fixed" :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }">
      <view class="action" @tap="back()"><text class="cuIcon-back"></text></view>
      <view class="content" :style="[{ top: StatusBar + 'px' }]">{{ i18n['订单详情'] }}</view>
    </view>
    <!-- 顶部导航栏-结束 -->
    <!-- 订单状态-开始 -->
    <view class="status-box flex align-center justify-between">
      <view class="left text-white">
        <view v-if="select_way_num == 1" class="status">{{ model.status | statusFil }}</view>
        <view v-else class="status">{{ model.status | inviteStatusFil }}</view>
        <view class="text-sm" v-if="model.status == 0">{{ i18n['剩余时间'] }}: {{ downTime.hours }}:{{ downTime.minutes }}:{{ downTime.seconds }}</view>
        <view class="text-sm" v-if="model.status == 2">{{ i18n['还剩'] }}{{ downTime.days }}{{i18n['天']}}{{ downTime.hours }}{{i18n['时自动确认']}}</view>
        <view class="text-sm" v-if="model.status == 3">{{i18n["您的评价将会给其他买家参考"]}}</view>
      </view>
      <image class="icon" :src="model.status | statusIconFil" mode="aspectFit"></image>
    </view>
    <!-- 订单状态-结束 -->
    <!-- 收货地址-开始 -->
    <view class="body_top" v-if="select_way_num == 2">
      <view class="address ">
        <image class="head" :src="imgWechatUrl+'/order/address_3.png'" mode=""></image>
        <view class="address-box-invite">
          <view class="p1">
            <view class="text1">{{ model.pick_info.pickup_user_name }}</view>
			<view class="">
				({{model.pick_info.sex==1?'先生':'女士'}})
			</view>
            <view class="text2">{{ model.pick_info.pickup_user_mobile }}</view>
          </view>
        </view>
        <image class="to-icon" :src="imgWechatUrl+'/order/right.png'" mode=""></image>
      </view>

      <view class="address solid-top">
        <image class="head" :src="imgWechatUrl+'/order/address_2.png'" mode=""></image>
        <view class="address-box-invite">
          <view class="p2">{{ model.pick_info.full_address }}</view>
        </view>
        <image class="to-icon" :src="imgWechatUrl+'/order/right.png'" mode=""></image>
      </view>
      <view class="goods-info-invite ">
        <view class="info-box solid-top">
          <!-- 选择自取时间 -->
          <view class="info-item">
            <view class="item-left">
              <view class="text margin-left-xs">{{ i18n['自取时间'] }}:</view>
            </view>
            <view class="item-right  text-gray">{{ model.pick_info.pickup_delivery_time }} ({{ model.pick_info.pickup_date }})</view>
          </view>
        </view>
      </view>
    </view>

    <view class="address-box bg-white" v-if="select_way_num == 1">
      <image class="avatar" :src="imgWechatUrl+'/order/address.png'" mode="aspectFill"></image>
      <view class="flex align-center justify-between">
        <view class="left">
          <view class="flex align-center">
            <view class="tag" v-if="model.order_info.label_name">{{ model.order_info.label_name }}</view>
            <view class="name text-df">{{ model.order_info.receiver_name }}</view>
			<view class="">
				({{model.order_info.sex==1?'先生':'女士'}})
			</view>
            <text class="mobile text-df">{{ model.order_info.receiver_mobile }}</text>
          </view>
          <view class="content">{{ model.order_info.province + ' ' + model.order_info.city + ' ' + model.order_info.district + ' ' + model.order_info.receiver_address }}</view>
        </view>
        <!-- <view class="cuIcon-right"></view> -->
      </view>
    </view>
    <!-- 收货地址-结束 -->

    <!-- 商品和金额信息-开始 -->
    <view class="center-box bg-white">
      <view class="goods">
        <block v-for="(item, index) in model.order_goods_list" :key="index">
          <view class="goods-item" @click="navToDetail(item)">
            <view class="goods-img overHidden"><fu-image :src="item.goods_thumb" mode="aspectFit"></fu-image></view>
            <view class="right flex flex-direction justify-between">
              <view>
                <view class="text-333 text-df text-cut-2">{{ item.goods_name }}</view>
                <view class="text-sm text-999 margin-top-xs text-cut">{{ item.sku_name }}</view>
              </view>
              <view class="flex justify-between align-center">
                <text class="text-theme">
                  <text class="text-price text-sm"></text>
                  <text class="text-lg">{{item.shop_price}}</text>
                </text>
                <text class="text-999 text-sm">x{{item.num}}</text>
              </view>
            </view>
          </view>
          <view class="btns flex align-center justify-end padding-bottom-sm">
            <button class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn" @tap="toAfterOrderApply(item, index)" v-if="item.nonrefundable == 0">{{ i18n['申请售后'] }}</button>
            <button class="round width-220 height-60 fu-fs24 margin-left-sm btn cu-btn action" @tap="toAfterOrderDetails(item, index)" v-if="item.nonrefundable == 1 && item.refund_id > 0 && item.refund_info.is_delete !== 1">{{ i18n['查看售后详情'] }}</button>
            <!-- <button
              class="cu-btn margin-tb-sm round line-theme margin-left-sm sm"
              @tap="toCustomer(item)"
            >
            {{i18n['联系客服']}}
            </button> -->
          </view>
        </block>
      </view>
      <view class="price-info">
        <view class="item flex align-center justify-between">
          <text class="item-label">{{ i18n['商品总额'] }}</text>
          <text class="item-value">¥{{ model.order_money }}</text>
        </view>
        <view class="item flex align-center justify-between">
          <text class="item-label">{{ i18n['优惠券'] }}</text>
          <text class="item-value">
            <text v-if="model.coupon_money > 0">-</text>
            ¥{{ model.coupon_money }}
          </text>
        </view>
        <view v-if="model.is_integral_reduce == 1" class="item flex align-center justify-between">
          <text class="item-label">{{ i18n['积分抵扣'] }}</text>
          <text class="item-value">-¥{{ model.reduce_money }}</text>
        </view>
        <view v-if="select_way_num == 1" class="item flex align-center justify-between">
          <text class="item-label">{{ i18n['运费'] }}</text>
          <text class="item-value">¥{{ model.order_info.express_price }}</text>
        </view>
        <view class="item total-price flex align-center justify-between">
          <text class="item-label"></text>
          <!--  预售 start -->
          <view class="item-value text-sm text-gray" v-if="model.status != 0 && order_type == 7 && model.final_status != 1">
            {{ i18n['定金'] }}
            <text class="text-sm goods-price margin-left-xs">
              <text class="text-price text-sm"></text>
              <text class="text-lg text-bold">{{ model.payable_money }}</text>
            </text>
          </view>
          <view class="item-value text-sm text-gray" v-if="model.status == 0 && order_type == 7 && model.final_status != 1">
            {{ i18n['需付定金'] }}
            <text class="text-sm goods-price margin-left-xs">
              <text class="text-price text-sm"></text>
              <text class="text-lg text-bold">{{ model.payable_money }}</text>
            </text>
          </view>
          <view class="item-value text-sm text-gray" v-if="model.status != 0 && order_type == 7 && model.final_status != 1">
            {{ i18n['应付尾款'] }}
            <text class="text-sm goods-price margin-left-xs">
              <text class="text-price text-sm"></text>
              <text class="text-lg text-bold">{{ model.final_order.payable_money }}</text>
            </text>
          </view>
          <!--  预售 end  -->
          <view class="item-value text-sm text-gray" v-if="model.pay_time != '' && order_type != 7">
            {{ i18n['实付款'] }}
            <text class="text-sm goods-price margin-left-xs">
              <text class="text-price text-sm"></text>
              <text class="text-lg text-bold">{{ model.payable_money }}</text>
            </text>
          </view>
          <view class="item-value text-sm text-gray" v-if="model.pay_time == '' && order_type != 7">
            {{ i18n['应付款'] }}
            <text class="text-sm goods-price margin-left-xs">
              <text class="text-price text-sm"></text>
              <text class="text-lg text-bold">{{ model.payable_money }}</text>
            </text>
          </view>
        </view>
      </view>
    </view>
    <!-- 商品和金额信息-结束 -->

    <!-- 订单信息-开始 -->
    <view class="goods-info">
      <view class="title text-lg text-blod">{{ i18n['订单信息'] }}</view>
      <view class="content">
        <!-- <view class="info-item flex text-sm" v-if="model.order_info && model.order_info.remark">
          <view class="info-label text-gray">{{ i18n['订单备注'] }}</view>
          <view class="info-value">{{ model.order_info.remark }}</view>
        </view> -->
        <view class="info-item flex text-sm">
          <view class="info-label text-gray">{{i18n['订单备注']}}</view>
          <view class="info-value">{{ model.order_info && model.order_info.remark? model.order_info.remark : i18n['无'] }}</view>
        </view>
        <view class="info-item flex text-sm">
          <view class="info-label text-gray">{{ i18n['订单编号'] }}</view>
          <view class="info-value">
            {{ model.order_sn }}
            <text @click="copyOrderSn(model.order_sn)" class="text-blue copy-btn" space="emsp">{{ i18n['复制'] }}</text>
          </view>
        </view>
        <view class="info-item flex text-sm">
          <view class="info-label text-gray">{{ i18n['下单时间'] }}</view>
          <view class="info-value">{{ model.create_time }}</view>
        </view>
        <view class="info-item flex text-sm" v-if="model.pay_time">
          <view class="info-label text-gray">{{ i18n['付款金额'] }}</view>
          <view class="info-value text-red">¥{{ model.payable_money }}</view>
        </view>
        <view class="info-item flex text-sm" v-if="model.pay_type">
          <view class="info-label text-gray">{{ i18n['支付方式'] }}</view>
          <!-- <view class="info-value">{{ model.pay_type | payTypeFil }}</view> -->
          <view class="info-value">{{ model.pay_type }}</view>
        </view>
        <view class="info-item flex text-sm" v-if="model.pay_time">
          <view class="info-label text-gray">{{ i18n['支付时间'] }}</view>
          <view class="info-value">{{ model.pay_time ? model.pay_time : i18n['暂无'] }}</view>
        </view>
      </view>
    </view>
    <!-- 拼团商品的信息 -->
    <view class="margin-bottom-sm" v-if="order_type == 5">
      <view class="bg-white radius-20 text-df text-333 goods-info">
        <view class="title text-lg text-blod">{{ i18n['拼团明细'] }}</view>
        <view class="content">
          <view class="info-item flex text-sm">
            <view class="text-gray margin-right-sm">{{ i18n['开团时间'] }}:</view>
            <view class="info-value">{{ model.group_info.create_time }}</view>
          </view>
          <view class="info-item flex text-sm">
            <view class="text-gray margin-right-sm">{{ i18n['是否成团'] }}:</view>
            <view class="info-value">{{ model.group_info.is_full == 1 ? i18n['是'] : i18n['否'] }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 预定商品的信息 -->
    <view class="margin-bottom-sm" v-if="order_type == 7">
      <view class="bg-white radius-20 text-df text-333 goods-info">
        <view class="title text-lg text-blod">{{ i18n['预售明细'] }}</view>
        <view class="content">
          <view class="info-item flex text-sm">
            <view class="text-gray title-lm margin-right-sm">{{ i18n['尾款开始时间'] }}:</view>
            <view class="info-value" v-if="model.activity_time">{{ (model.activity_time.presell_stime * 1000) | formatDate }}</view>
          </view>
          <view class="info-item flex text-sm">
            <view class="text-gray title-lm margin-right-sm">{{ i18n['尾款结束时间'] }}:</view>
            <view class="info-value" v-if="model.activity_time">{{ (model.activity_time.presell_etime * 1000) | formatDate }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 订单信息-结束 -->

    <!-- 底部操作-开始 -->
    <view class="footer">
      <view class="footer-wrap flex align-center justify-end">
        <!-- 发票按钮 start -->
        <!-- <button class="btn" type="default" v-if="model.order_refund_status == 0 && model.status != 0 && model.status != -1 && model.payable_money > 0" @click="handleInvoice">
          <text v-if="model.invoice_status == 0">{{i18n['申请开票']}}</text>
          <text v-if="model.invoice_status == 1 || model.invoice_status == 2">{{i18n['查看发票']}}</text>
        </button> -->
        <!-- 发票按钮 end -->
        <button @click="showPopup = true" class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn" v-if="select_way_num == 1 && isContentShow([0], model.status)">{{ i18n['取消订单'] }}</button>
        <view class="round width-170 height-60 fu-fs24 margin-left-sm text-center line-height-60  bg-theme text-white" v-if="isContentShow([0], model.status)" @tap="toPay(order_sn, order_type)">{{ i18n['去付款'] }}</view>
        <button class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn" v-if="isContentShow([-2, -1, 4, 6, 7], model.status)" @tap="delOrder">{{ i18n['删除订单'] }}</button>
        <button class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn" v-if="isContentShow([2, 3], model.status)" @tap="seelogs">{{ i18n['查看物流'] }}</button>
        <view class="round width-170 height-60 fu-fs24 margin-left-sm text-center line-height-60  bg-theme text-white" v-if="isContentShow([3], model.status) &&  !model.is_refund" @click.stop="evaluateOrder()">{{ i18n['评价'] }}</view>
        <button class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn" v-if="isContentShow([1], model.status) && model.is_remind.info == 0" @tap="remindOrder(order_sn)">{{ i18n['提醒发货'] }}</button>
        <button class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn" v-if="isContentShow([1], model.status) && model.is_remind.info == 1" disabled="false" >{{ i18n['已提醒'] }}</button>
        <button class="round width-170 height-60 fu-fs24 margin-left-sm btn cu-btn" v-if="isContentShow([2], model.status)" @tap="receiveOrder">{{ i18n['确认收货'] }}</button>
      </view>
    </view>
    <!-- 底部操作-结束 -->

    <!-- 取消订单弹出层-开始 -->
    <fu-popup v-model="showPopup" mode="bottom" border-radius="24">
      <view class="cancel-order-pop">
        <view class="flex justify-between align-center" style="padding:0 32rpx;">
          <view class="text-999 text-weight-400 text-df" @click="showPopup = false">{{ i18n['取消'] }}</view>
          <view class="pop-title">{{ i18n['取消订单'] }}</view>
          <view class="text-red text-weight-400 text-df" @click="cancelOrder()">{{ i18n['确定'] }}</view>
        </view>

        <view class="pop-count">
          <view class="tips text-sm">{{ i18n['请选择取消订单原因'] }}</view>
          <scroll-view scroll-y="true" style="max-height: 400rpx; min-height: 200rpx">
            <view class="pop-count-list">
              <view @click="onChangeReson(item, index)" class="item flex align-center justify-between" v-for="(item, index) in reasonList" :key="index">
                <view class="item-label">{{ item.reason }}</view>
                <image v-if="index == cancelReason.current" class="item-img" :src="imgWechatUrl+'/order/icon-select-2.png'" mode="aspectFit"></image>
                <image v-else :src="imgWechatUrl+'/order/icon-select-1.png'" mode="aspectFit" class="item-img"></image>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </fu-popup>
    <!-- 取消订单弹出层-结束 -->
  </view>
</template>

<script>
const statusObj = {
  '-1': global.i18n['已取消'],
  0: global.i18n['等待买家付款中'],
  1: global.i18n['订单已付款，等待卖家发货'],
  2: global.i18n['卖家已发货'],
  3: global.i18n['交易成功'],
  4: global.i18n['订单已评价'],
  5: global.i18n['售后处理中'],
  6: global.i18n['退款成功']
};
export default {
  data() {
    return {
      downTime: {
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0
      },
      timer: null, // 定时器
			imgWechatUrl:this.imgWechatUrl,
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar,
      showPopup: false, // 控制取消订单弹出层是否显示
      order_sn: '', //订单号，订单列表页面传过来
      order_type: '', //订单类型, 3：普通订单
      itemIndex: null, //当前订单在订单列表页的索引
      model: {
        is_refund:true,//针对完成的单据是否显示去评价（完成退款售后不显示）
        //订单详情对象
        create_time: '', //创建时间
        status: null, //订单状态，-1：已取消 0：待付款 1：待发货 2：待收货 3：交易成功
        order_sn: null, //订单号
        user_id: '', //会员id
        order_type: 3, //订单类型, 3：普通订单 4：积分商品
        order_money: '', //订单金额
        payable_money: '', //应付金额
        real_money: '', //实付金额
        real_balance: '', //真实金额
        pay_status: '', //支付状态
        pay_type: '', //支付渠道
        coupon_id: '', //优惠券id
        coupon_money: '', //优惠券金额
        transaction_id: '', //第三方支付订单id
        pay_time: '', //支付时间
        return_id: '', //取消订单原因
        sender_id: '', //发货人ID
        activity_time: {
          presell_stime: '',
          presell_etime: '',
          is_pay: ''
        }, // 预售信息
        final_status: '', // 尾款状态
        final_order: {
          payable_money: '', //尾款金额
          order_type: '',
          order_sn: ''
        },
        is_remind: {
          info: ''
        }, // 是否提醒
        group_info: {
          is_full: '',
          create_time: '' // 拼团信息
        },
        order_info: {
          address_id: '', //地址ID
          receiver_mobile: '', //接收人电话
          receiver_address: '', //接收人地址
          receiver_name: '', //接收人姓名
          remark: '', //备注
          consign_time: '', //卖家发货时间
          sign_time: '', //买家签收时间
          finish_time: '', //订单完成时间
          express_price: '', //运费
          province: '', //省
          city: '', //市
          district: '', //区
          label_name: '' // 标签名
        },
        pick_info: {
          pickup_date: '',
          pickup_delivery_time: '',
          deliver_mobile: '',
          deliver_name: '',
          full_address: ''
        },
        order_goods_list: [], //订单商品列表
        cancel_time: '', //取消时间
        refund_day: '', //拒绝日期
        order_refund_status: 0 ,//订单是进行售后是否已经完成
        invoice_status: 0,// 发票状态
      },
      reasonList: [], //取消原因列表
      cancelReason: {
        //取消原因对象
        current: -1, //当前原因索引
        id: '' //档原因id
      },
      goodsInfo: [], // 下单商品
      select_way_num: 1 //用来判断是配送订单  还是自取订单  1 是配送 默认 2是自取
    };
  },
  onLoad(options) {
		const { order_sn, order_type, itemIndex } = options;
    this.order_sn = order_sn;
    this.order_type = order_type;
    this.itemIndex = itemIndex;
    this.getReasonList();
		this.getDetail();
    uni.$on('onOrederDetailPageUpdata', () => {
			this.getDetail();
		});
  },
  onShow() {
  },
  onUnload() {
		clearInterval(this.timer);
		this.timer = null;
    uni.$off('onOrederDetailPageUpdata');
  },
  methods: {
    /**
     * @event
     * @description 跳转到商品详情
     * @param {Object} item - 商品信息
     */
    navToDetail(item) {
      this.$urouter.navigateTo({
        url: '/pages/goods/goodsdetail/goods-detail/index',
        params: {
          sku_id: item.sku_id || 0,
          goods_id: item.goods_id
        }
      });
    },
		/**
		 * @description 取消订单
		 */
		cancelOrder() {
		  if (!this.cancelReason.id) return this.$message.info(this.i18n['请选择取消原因']);
		  this.$api.post(global.apiUrls.postCancelOrder, {
				order_sn: this.model.order_sn,
				return_id: this.cancelReason.id
			}).then(res => {
				this.$message.info(res.data.msg);
				if (res.data.code == 1) {
					this.showPopup = false;
					// 通知列表页面更新数据
					uni.$emit('onPageUpdata', {
						type: 1, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单，
						index: this.itemIndex
					});
					// 通知详情页面更新数据
					uni.$emit('onOrederDetailPageUpdata');
				}
			}).catch(err => {
				this.$message.info('服务器错误，请稍后重试');
			});
		},
    // 提醒发货
    remindOrder(sn) {
      this.$api.post(global.apiUrls.postRemindShipment, {
				order_sn: sn
			}).then(res => {
				if (res.data.code == 1) {
					this.$message.info(this.i18n['已提醒,请耐心等待']);
					// 通知列表页面更新数据
					uni.$emit('onPageUpdata', {
						type: 2, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单，
						index: this.itemIndex
					});
					// 通知详情页面更新数据
					uni.$emit('onOrederDetailPageUpdata');
				} else {
					this.$message.info(res.data.msg);
				}
			}).catch(err => {
				this.$message.info('服务器错误，请稍后重试');
			});
    },
		/**
		 * @description 删除订单
		 */
		delOrder() {
		  this.$util.showModal({
		    title: this.i18n['确认删除此订单?'],
		    content: this.i18n['删除后不可恢复'],
		    success: res => {
		      if (res.confirm) {
		        this.$api.post(global.apiUrls.postDelOrder, {
							order_sn: this.model.order_sn
						}).then(res => {
							let data = res.data;
							if (data.code == 1) {
								this.$message.info(this.i18n['删除成功']);
								// 通知列表页面更新数据
								uni.$emit('onPageUpdata', {
									type: 4, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单，
									index: this.itemIndex
								});
								setTimeout(() => {
									this.back();
								}, 800);
							} else {
								this.$message.info(data.msg);
							}
						}).catch(err => {
							this.$message.info('服务器错误，请稍后重试');
						});
		      }
		    }
		  });
		},
		
		/**
		 * @description 确认收货
		 * */
		receiveOrder() {
		  this.$util.showModal({
		    title: this.i18n['提示'],
		    content: this.i18n['您是否确认收到货物?'],
		    success: res => {
		      if (res.confirm) {
		        this.$api.post(global.apiUrls.postConfirmOrder, {
							order_sn: this.model.order_sn
						}).then(res => {
							this.$message.info(res.data.msg);
							if (res.data.code == 1) {
								// 通知列表页面更新数据
								uni.$emit('onPageUpdata', {
									type: 3, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单，
									index: this.itemIndex
								});
								// 通知详情页面更新数据
								uni.$emit('onOrederDetailPageUpdata');
							}
						}).catch(err => {
							this.$message.info('服务器错误，请稍后重试');
						});
		      }
		    }
		  });
		},
		/**
		 * @description 去支付
		 * @param {string} sn = 订单号
		 * @param {Number} type = 订单类型
		 * */
		toPay(sn, type) {
		  this.$urouter.navigateTo({
		    url: '/pages/order/order-process/pay-order/index',
		    params: {
		      order_sn: sn,
		      order_type: type,
					itemIndex: this.itemIndex
		    }
		  });
		},
		
		// 订单评价
		evaluateOrder() {
		  uni.setStorageSync('order_goods_list', JSON.stringify(this.goodsInfo));
		  this.$urouter.navigateTo({
		    url: '/pages/order/evaluation/order-evaluation/index',
		    params: {
		      order_sn: this.order_sn,
		      order_type: this.order_type,
					itemIndex: this.itemIndex
		    }
		  });
		},
		
    // 查看物流
    seelogs() {
      let that = this;
      this.$urouter.navigateTo({
        url: '/pages/order/orderdetail/express-delivery/index',
        params: {
          order_sn: that.order_sn
        }
      });
    },
    
    // 联系客服
    toCustomer(item) {
      let data = {
        order_sn: this.order_sn,
        orderStatus: statusObj[this.model.status],
        createTime: this.model.create_time,
        goods_thumb: item.goods_thumb,
        goods_name: item.goods_name,
        goods_price: item.goods_money,
        goods_id: item.goods_id
      };

      if (this.model.send_type == 1) {
        data.user_name = this.model.pick_info.pickup_user_name;
        data.user_phone = this.model.pick_info.pickup_user_mobile;
        data.user_address = this.model.pick_info.full_address;
      } else {
        data.user_name = this.model.order_info.receiver_name;
        data.user_phone = this.model.order_info.receiver_mobile;
        data.user_address = this.model.order_info.receiver_address;
      }

      try {
        uni.setStorageSync('CustomerCacheData', data);
      } catch (err) {
        console.log(err);
      }
      this.$urouter.navigateTo({
        url: '/pages/service-message/service/service-detail/index',
        params: {
          kid: 1,
          goods_id: item.goods_id,
          activity_id: item.activity_id || 0
        }
      });
    },
    
    /**
     * @description 获取订单详情
     */
    getDetail() {
      this.$api
        .get(global.apiUrls.getOrderDetail, {
          order_sn: this.order_sn,
          order_type: this.order_type
        })
        .then(res => {
          let data = res.data;
          console.log('获取订单详情', data);
          if (data.code == 1) {
            if (data.data.send_type == 1) {
              this.select_way_num = 2;
            } else {
              this.select_way_num = 1;
            }
            this.model = data.data;
            this.goodsInfo = data.data.order_goods_list;
            if (data.data.cancel_time) {
              this.initDownTime(data.data.cancel_time);
            }
            if(data.data.status == 2){
              this.initDownTime(data.data.order_receive_time);
            }
           //去评价 
          if(this.model.status == 3 &&  this.goodsInfo && this.goodsInfo.length>0){
						this.goodsInfo.forEach((goodItem)=>{
							this.model.is_refund = false
								if(goodItem.order_refund_status || goodItem.order_refund_status == 0){
									this.model.is_refund = true
								}
							})
						}
          }
        });
    },

    /**
     * @description 获取取消原因列表
     */
    getReasonList() {
      this.$api.post(global.apiUrls.getReasonList, {
				type: 2
			}).then(res => {
				let data = res.data;
				console.log('获取取消原因列表', data.data);
				if (data.code == 1) {
					this.reasonList = data.data;
				}
			});
    },
    // 开启倒计时
    initDownTime(time) {
      if (this.timer) {
        clearInterval(this.timer);
      }
      let endTime = time * 1000;
      let nowTime = new Date().getTime();
      let timeleft = endTime - nowTime;
      if (timeleft > 0) {
        var days = parseInt((timeleft / (1000 * 60 * 60 * 24)));
        var hours = parseInt((timeleft / (1000 * 60 * 60)) % 24);
        var minutes = parseInt((timeleft / (1000 * 60)) % 60);
        var seconds = parseInt((timeleft / 1000) % 60);
        this.downTime.days = days;
        this.downTime.hours = hours < 10 ? '0' + hours : hours;
        this.downTime.minutes = minutes < 10 ? '0' + minutes : minutes;
        this.downTime.seconds = seconds < 10 ? '0' + seconds : seconds;
        this.timer = setInterval(() => {
          nowTime = new Date().getTime();
          timeleft = endTime - nowTime;
          if (timeleft > 0) {
            var days = parseInt((timeleft / (1000 * 60 * 60 * 24)));
            var hours = parseInt((timeleft / (1000 * 60 * 60)) % 24);
            var minutes = parseInt((timeleft / (1000 * 60)) % 60);
            var seconds = parseInt((timeleft / 1000) % 60);
            this.downTime.days = days;
            this.downTime.hours = hours < 10 ? '0' + hours : hours;
            this.downTime.minutes = minutes < 10 ? '0' + minutes : minutes;
            this.downTime.seconds = seconds < 10 ? '0' + seconds : seconds;
          } else {
            clearInterval(this.timer);
            this.getDetail();
            this.timer = null;
          }
        }, 1000);
      }
    },
    
    /**
     * @description 监听切换取消原因
     * @param {Object} item = 当前原因项
     * @param {Number} index = 当前原因在列表中的索引
     */
    onChangeReson(item, index) {
      if (this.cancelReason.current == index) return false;
      this.cancelReason.current = index;
      this.cancelReason.id = item.id;
    },

    /**
     * @description 去售后详情
     * @param {Object} item = 当前商品对象
     * @param {Number} index = 当前商品在列表中的索引
     */
    toAfterOrderDetails(item, index) {
			this.$urouter.navigateTo({
				url: '/pages/order/afterorder/afterorder-detail/index',
				params: {
					id: item.refund_id,
					itemIndex: this.itemIndex
				}
			});
    },
		/**
		 * @description 去申请售后
		 * @param {Object} item = 当前商品对象
		 * @param {Number} index = 当前商品在列表中的索引
		 */
		toAfterOrderApply(item, index) {
			this.$urouter.navigateTo({
			  url: '/pages/order/afterorder/afterorder-apply/index',
			  params: {
			    sku_id: item.sku_id,
			    order_sn: this.order_sn,
			    goods_id: item.goods_id,
			    status: item.order_status,
					num: item.num
			  }
			});
		},
    /**
     * @description 页面返回
     * @param {delta} delta = 返回的页面数，如果 delta 大于现有页面数，则返回到首页
     */
    back(delta) {
      uni.navigateBack({
        delta: delta || 1
      });
    },

    /**
     * @description 判断内容是否显示
     * @param {String} arr = 要判断的数组
     * @param {String | Number} val = 要判的值
     */
    isContentShow(arr, val) {
      return arr.includes(val * 1);
    },

    /**
     * @description 复制订单号
     * @param {String} orderSn = 订单号
     */
    copyOrderSn(orderSn) {
      // #ifdef H5
      return this.$message.info(this.i18n['请在手机端操作']);
      // #endif
      uni.setClipboardData({
        data: orderSn,
        success: () => {
          this.$message.info(this.i18n['复制成功']);
        }
      });
    },
    // 发票
    handleInvoice() {
      const {invoice_status, order_sn, payable_money} = this.model;
      let url = `/pages/invoice/invoice/apply-invoice/index?order_sn=${order_sn}&payable_money=${payable_money}&status=${invoice_status}`;
      // status == 0去申请开票
      if (invoice_status == 0) {
        uni.navigateTo({
          url: url
        });
      }
      // status == 1已申请过发票  可以修改发票（修改，撤销发票）   只有查看了发票才知道是否需要修改
      //  status == 2发票已经开票成功  不能再修改
      if (invoice_status == 1 || invoice_status == 2) {
        uni.navigateTo({
          url: '/pages/invoice/invoice/invoice-info/index?order_sn=' + order_sn + '&payable_money=' + payable_money
        });
      }
    },
  },
  filters: {
    // 过滤订单状态
    statusFil(val) {
      let data = {
				'status_-2': global.i18n['订单已取消'],
        'status_-1': global.i18n['订单已关闭'],
        status_0: global.i18n['订单待付款'],
        status_1: global.i18n['订单待发货'],
        status_2: global.i18n['订单待收货'],
        status_3: global.i18n['订单待评价'],
        status_4: global.i18n['订单已完成'],
        status_6: global.i18n['售后已完成'],
      };
      return data['status_' + val] || '';
    },
    // 过滤自取订单状态
    inviteStatusFil(val) {
      let data = {
				'status_-2': global.i18n['订单已取消'],
				'status_-1': global.i18n['订单已关闭'],
        'status_0': global.i18n['订单待付款'],
        'status_1': global.i18n['待提货'],
        'status_2': global.i18n['待提货'],
        'status_3': global.i18n['提货成功'],
        'status_4': global.i18n['订单已评价']
      };
      return data['status_' + val] || '';
    },
    // 过滤订单状态图标
    statusIconFil(val) {
      let data = {
				'status_-2':
				  '',
        'status_-1':
          '',
        status_0:
          '',
        status_1:
          '',
        status_2:
          '',
        status_3:
          '',
        status_4:
          '',
					status_6:
					  ''
      };
      return data['status_' + val] || '';
    },
    // 过滤支付渠道
    payTypeFil(val) {
      let data = {
        wxpay: global.i18n['微信支付'],
        alipay: global.i18n['支付宝支付'],
        appleiap: global.i18n['苹果内购'],
        balance: global.i18n['余额支付'],
        minipay: global.i18n['微信支付'],
        minipay_mix: global.i18n['组合支付'],
        xx_pay: global.i18n['后台下单']
      };
      return data[val] || '';
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
}

.order-detail-page {
  background-image: url($IMG_WECHAT_URL+'/order/bg-1.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  min-height: calc(100vh - 88rpx);
  font-family: PingFang SC;
  padding-top: calc(88rpx + var(--status-bar-height));
  padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  .text-red {
    color: $theme;
  }

  .text-blue {
    color: #2f98fe;
  }

  // 顶部导航栏-开始
  .cu-bar {
    background: linear-gradient(90deg, #fa2033, #ff6530);
    color: white;
    box-shadow: none;
  }

  // 顶部导航栏-结束

  // 订单状态-开始
  .status-box {
    margin: 20rpx 24rpx;
    .status {
      font-size: 32rpx;
      margin-bottom: 8rpx;
    }

    .icon {
      width: 140rpx;
      height: 140rpx;
      margin-right: 14rpx;
    }
  }

  // 订单状态-结束


  // 收货地址-开始
  .address-box {
    margin: 0 24rpx;
    margin-bottom: 20rpx;
    /* margin-top:40rpx; */
    padding: 0 24rpx 0 108rpx;
    border-radius: 16rpx;
    position: relative;

    .avatar {
      position: absolute;
      top: 50%;
      left: 24rpx;
      transform: translateY(-50%);
      border-radius: 50%;
      width: 60rpx;
      height: 60rpx;
    }

    & > .flex {
      height: 174rpx;
      padding: 24rpx 0;

      .left {
        .tag {
          border-radius: 8rpx;
          font-size: 24rpx;
          padding: 0 10rpx;
          color: #6a8bff;
          background: rgba(105, 139, 255, 0.08);
          border: 1rpx solid #698bff;
          margin-right: 16rpx;
        }

        .mobile {
          font-family: Lato;
          margin-left: 16rpx;
        }

        .content {
          margin-top: 16rpx;
          font-size: 24rpx;
          line-height: 38rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  // 收货地址-结束

  // 商品和金额信息-开始
  .center-box {
    margin: 0 24rpx 20rpx;
    padding: 32rpx 20rpx 0;
    border-radius: 16rpx;

    .goods-price {
      color: $theme;
    }

    .goods {
      border-bottom: 1px solid #eeeeee;

      .goods-item {
        padding-left: 224rpx;
        min-height: 200rpx;
        position: relative;
        margin-bottom:32rpx;
        .goods-img {
          position: absolute;
          left: 0;
          top: 0;
          width: 200rpx;
          height: 200rpx;
          border-radius: 24rpx;
        }

        .right {
          min-height: 200rpx;

          .goods-title {
            height: 84rpx;
            line-height: 42rpx;
            margin-bottom: 8rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .goods-sku {
            margin-bottom: 38rpx;
          }
        }
      }

      .btns {
        width: 100%;
        background-color: white;

        .btn {
          color: #333;
          background-color: #f6f6f6;
        	&.action {
        		color: #fff;
        		background: $bgtheme;
        	}
        }
      }
    }

    .price-info {
      padding-top: 32rpx;

      .item {
        padding-bottom: 32rpx;

        &.total-price {
          padding-top: 32rpx;
          border-top: 1px solid #eeeeee;
        }
      }
    }
  }

  // 商品和金额信息-结束

  //订单信息-开始
  .goods-info{
    margin: 0 24rpx 20rpx;
    background-color: white;
    padding: 0 24rpx;
    border-radius: 16rpx;

    .title {
      padding: 24rpx 0 24rpx 22rpx;
      border-bottom: 1px solid #eeeeee;
      position: relative;

      &:after {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 30rpx;
        border-radius: 8rpx;
        content: '';
        display: block;
        background: $bgtheme;
      }
    }

    .content {
      padding-top: 32rpx;

      .info-item {
        padding-bottom: 32rpx;

        .info-label {
          width: 136rpx;
          flex-shrink: 0;
        }

        .copy-btn {
          display: inline-block;
          margin-left: 44rpx;
        }
      }
    }
  }

  //订单信息-结束

  // 底部操作-开始
  .footer {
    .footer-wrap {
      width: 100%;
      position: fixed;
      padding: 0 24rpx;
      left: 0;
      bottom: 0;
      background-color: white;
			height: 100rpx;
      height: calc(100rpx + constant(safe-area-inset-bottom));
      height: calc(100rpx + env(safe-area-inset-bottom));
      padding-bottom: 0;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      .btn {
        color: #333;
        background-color: #f6f6f6;
      	&:last-child {
      		color: #fff;
      		background: $bgtheme;
      	}
      }
    }
  }

  // 底部操作-开始

  // 取消订单弹出层-开始
  .cancel-order-pop {
    border-radius: 24rpx 24rpx 0 0;

    .pop-title {
      line-height: 114rpx;
      height: 114rpx;
      text-align: center;
      font-size: 36rpx;
      font-weight: bold;
    }

    .pop-count {
      .tips {
        line-height: 90rpx;
        background-color: #f8f8f8;
        padding: 0 24rpx;
        color: #666;
      }

      .pop-count-list {
        padding: 32rpx 24rpx;

        .item {
          padding-bottom: 32rpx;

          .item-img {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }

    .pop-footer {
      height: 110rpx;
      padding: 0 24rpx;
      border-top: 1px solid #eeeeee;

      .btn {
        width: 328rpx;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 30rpx;
        text-align: center;

        &.btn-type-1 {
          background-color: #f6f6f6;
        }

        &.btn-type-2 {
          color: white;
          background: $bgtheme;
        }

      }
    }
  }

  // 取消订单弹出层-结束
}

.title-info {
  margin: 10rpx 0;
  border-bottom: 1px solid salmon;
  width: 120rpx;
}
.info-value {
  word-break: break-all;
}

.body_top {
  background: #fff;
  border-radius: 16rpx;
  margin: 24rpx auto 0;
  width: 702rpx;
}

.address {
  width: 662rpx;
  height: 100rpx;
  opacity: 1;
  margin-left: 20rpx;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .head {
    display: block;
    width: 60rpx;
    height: 60rpx;
    flex-shrink: 0;
    border-radius: 50%;
  }

  .address-box-invite {
    height: 221rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 498rpx;
    flex-shrink: 0;

    .p1 {
      display: flex;
      align-items: center;

      .label {
        /* width: 56rpx; */
        padding: 0 10rpx;
        // height: 32rpx;
        background: rgba(105, 139, 255, 0.08);
        border: 1px solid #698bff;
        opacity: 1;
        border-radius: 8rpx;
        text-align: center;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 32rpx;
        color: #698bff;
        opacity: 1;
      }

      .text1 {
        margin-left: 16rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        line-height: 34rpx;
        color: #333333;
        opacity: 1;
      }

      .text2 {
        margin-left: 32rpx;
        font-size: 32rpx;
        font-family: Lato;
        font-weight: 500;
        line-height: 34rpx;
        color: #333333;
        opacity: 1;
      }
    }

    .p2 {
      margin-top: 16rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 40rpx;
      color: #666666;
      opacity: 1;
      //两行溢出隐藏
      white-space: normal;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .no-address {
      color: #999;
      font-size: 24rpx;
    }
  }

  .to-icon {
    margin-right: 40rpx;
    display: block;
    width: 12rpx;
    height: 22rpx;
    flex-shrink: 0;
  }
}

// 商品信息
.goods-info-invite {
  margin: 0rpx auto 30rpx;
  padding: 0 10rpx 32rpx;
  width: 702rpx;
  overflow: hidden;
  background: #ffffff;
  opacity: 1;
  border-radius: 16rpx;

  .info-box {
    width: 662rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    margin: 0 auto;
    overflow: hidden;
    margin: 0 4rpx;
    padding-right: 30rpx;

    .info-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 32rpx;

      .item-left {
        display: flex;
        align-items: center;

        // 商品总额 优惠券 运费
        .text {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 42rpx;
          color: #333333;
          opacity: 1;
        }

        .text2 {
          margin-left: 32rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 42rpx;
          color: #bfbfbf;
          opacity: 1;
        }

        .ipt {
          padding-left: 32rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 42rpx;
          color: #bfbfbf;
          opacity: 1;
          width: 90%;
        }
      }

      .item-right {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 42rpx;
        color: #333333;
        opacity: 1;

        .icon {
          display: block;
          width: 12rpx;
          height: 24rpx;
          flex-shrink: 0;
        }
      }
    }
  }

  .info-footer {
    width: 654rpx;
    margin: 45rpx auto 32rpx;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    .text1 {
      margin-right: 8rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 42rpx;
      color: #666666;
      opacity: 1;
    }
    .text2 {
      font-size: 32rpx;
      font-family: Oswald;
      font-weight: 500;
      line-height: 36rpx;
      color: #fa2033;
      opacity: 1;
    }
  }
}

</style>
